<template>
	<view class="html">
		<u-upload class="upload" :fileList="fileList" @afterRead="startTranslate" name="6" multiple :maxCount="1"
			:deletable="true">
			<image :src="src" mode="aspectFill" style="width: 100vw;height: 25vh;"></image>
		</u-upload>
		<view class="btngroup">
			<u-row gutter="4" justify="space-between">
				<u-col span="4">
					<u-button :plain="true" v-if="from==''" @click="showclose(1)" :hairline="true" text="源语言">
					</u-button>
					<u-button type="warning" v-if="from!=''" @click="showclose(1)" :plain="true" :hairline="true"
						:text="From"></u-button>
				</u-col>
				<u-col span="4">
					<u-button :plain="true" v-if="to==''" @click="showclose(2)" :hairline="true" text="目标语言"></u-button>
					<u-button type="warning" v-if="to!=''" @click="showclose(2)" :plain="true" :hairline="true"
						:text="To"></u-button>
				</u-col>
			</u-row>
		</view>
		<u-divider text="" :hairline="true" :dashed="true"></u-divider>
		<u-button v-if="newContext!=''" type="error" @click="copyContext()" plain class="btngroup" text="一键复制">
		</u-button>
		<u-text style="margin-top: 3%;" size="18" :text="newContext"></u-text>


		<u-popup :show="fromshow" mode="right" @close="fromshow=false">
			<u-list>
				<u-list-item v-for="(item,index) in languageList" :key="index">
					<u-cell :title="item.label" @click="selectFromTo(item,0)"></u-cell>
				</u-list-item>
			</u-list>
		</u-popup>

		<u-popup :show="toshow" mode="right" @close="toshow=false">
			<u-list>
				<u-list-item v-for="(item,index) in languageList" :key="index">
					<u-cell :title="item.label" @click="selectFromTo(item,1)"></u-cell>
				</u-list-item>
			</u-list>
		</u-popup>
		<u-notify ref="tipNotify"></u-notify>
	</view>
</template>

<script>
	import baiduLanguageList from '../../../static/language/baiduLanguageList.js'
	import storage from '../../../store/storage.js'
	export default {
		data() {
			return {
				src: '/static/uploadimg.jpg',
				fileList: [],
				from: '',
				to: '',
				fromshow: false,
				toshow: false,
				From: '',
				To: '',
				languageList: [],
				newContext: ''
			};
		},
		methods: {
			startTranslate(e) {
				let reg = /^\s*$/g;
				if (reg.test(this.from)) {
					this.$refs.tipNotify.warning("请选择图片中的语言");
					return;
				}
				if (reg.test(this.to)) {
					this.$refs.tipNotify.warning("请选择翻译后语言");
					return;
				}
				let url = e.file[0].url;
				this.src = url;
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				new Promise((res, err) => {
					uni.uploadFile({
						url: 'http://127.0.0.1:8090/baiduTranslate/imageTranslate',
						filePath: url,
						name: 'file',
						formData: {
							"platform": "baidu",
							"from": this.from,
							"to": this.to
						},
						success: (res) => {
							let result = JSON.parse(res.data);
							uni.hideLoading();
							if (result.code == 200) {
								this.newContext = result.data;
							} else {
								this.$refs.tipNotify.warning("系统繁忙");
							}
						}

					})
				})
			},
			showclose(item) {
				switch (item) {
					case 1:
						this.fromshow = !this.fromshow;
						break;
					case 2:
						this.toshow = !this.toshow;
						break;
				}

			},
			selectFromTo(val1, val2) {
				switch (val2) {
					case 0:
						this.From = val1.label;
						this.from = val1.value;
						this.fromshow = false;
						storage.setBaiduImgLanguage1(val1);
						break;
					case 1:
						this.To = val1.label;
						this.to = val1.value;
						this.toshow = false;
						storage.setBaiduImgLanguage2(val1);
						break;
				}
			},
			copyContext() {
				let reg = /^\s*$/g;
				if (!reg.test(this.newContext)) {
					uni.setClipboardData({
						data: this.newContext
					})
				}
			},
			init() {
				this.languageList = baiduLanguageList.list;
				this.fileList = [];
				this.newContext='';
				let reg = /^\s*$/g;
				if (!reg.test(storage.getPlatform())) {
					let p = storage.getPlatform();
					this.Platform = p.name;
					this.platform = p.value;
				}
				if (!reg.test(storage.getBaiduImgLanguage1())) {
					let p = storage.getBaiduImgLanguage1()
					this.From = p.label;
					this.from = p.value;
				}
				if (!reg.test(storage.getBaiduImgLanguage2())) {
					let p = storage.getBaiduImgLanguage2()
					this.To = p.label;
					this.to = p.value;
				}
			}
		},
		onLoad() {
			this.init();
		},
		onPullDownRefresh() {
			this.init();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss">
	.html {
		width: 96vw;
		margin: 0 auto;

		.upload {
			margin-top: 2%;
			width: 96vw;
			height: 25vh;
			overflow: hidden;
		}

		.btngroup {
			margin-top: 2%;
		}
	}
</style>
